import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Creditlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cardList: [],
            requirement: []
        }
    }

    componentDidMount() {
        this.cardlist()
    }

    async cardlist() {
        var arr = [util.getQuery().greenHand, util.getQuery().dicId, util.getQuery().point, util.getQuery().travel, util.getQuery().hot]
        var key;
        var val;
        for (let i in arr) {
            if (arr[i]) {
                var obj = ['greenHand', 'dicId', 'point', 'travel', 'hot']
                key = obj[i]
                val = arr[i]
            }
        }
        let res = await util.rjax({
            url: '/card/list?' + key + '=' + val,
            type: 'get',
        })

        this.setState({ cardList: res.data.rows });
    }

    render() {
        let cardlist = this.state.cardList.map((item, index) => {
            return (
                <li className="card" data-id={item.id} key={index}>
                    <a href={item.link}>
                        <p className="tit">{item.name}</p>
                        <p className="intr">{item.summary}</p>
                        <img className="cardimg" src={item.image} alt="" />
                        <div className="point">
                            <ul>
                                {item.characters.split(/\n/g).map((k, index) =>
                                    <li key={index}>{k}</li>
                                )}
                            </ul>
                        </div>
                        <button className="applybtn">立刻申请</button>
                    </a>
                </li>
            )
        })

        return (
            <div>
                <div id="creditlist">
                    <div className="cardsbox">
                        <ul>
                            {cardlist}
                        </ul>
                    </div>

                </div>
            </div>
        )
    }
}
ReactDom.render(<Creditlist />, document.getElementById("app"));